import { defineComponent, h } from 'vue';

import Demo from './Demo.vue';
// import AlternativeLabels from './AlternativeLabels.vue';
// import Coloring from './Coloring.vue';
// import Contracted from './Contracted.vue';
// import Dark from './Dark.vue';
// import HeaderClass from './HeaderClass.vue';
// import LinearNavigation from './LinearNavigation.vue';
// import MessageSlot from './MessageSlot.vue';
// import NonLinearNavigation from './NonLinearNavigation.vue';
// import Prefix from './Prefix.vue';
// import StepError from './StepError.vue';
// import TypeHorizontal from './TypeHorizontal.vue';
// import TypeVertical from './TypeVertical.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});
    return () => {
      return h(
        'div',
        {
          class: 'block',
        },
        h(
          'div',
          {
            class: 'block-',
          },
          h(
            'h5',
            {
              class: 'title'
            },
            'Demo'
          ),
          h(
            Demo
          )
        ),

        h('div', {
          class: 'q-stepper__step-content',
          style: 'background: pink;width: 100px;height:100px;'
        }, [
          h('div', {
            class: 'q-stepper__step-inner'
          }, 'wtw'),
          h('Demo', {
            class: 'q-stepper__step-inner2'
          }, 'wtw')
        ], h('div', '232')))
    }
    // return () => {
    //   return (
    //     <div class='block'>
    //       <div class='block-'>
    //         <h5 class='title'>Demo</h5>
    //         <Demo />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>AlternativeLabels</h5>
    //         <AlternativeLabels />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>Coloring</h5>
    //         <Coloring />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>Contracted</h5>
    //         <Contracted />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>Dark</h5>
    //         <Dark />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>HeaderClass</h5>
    //         <HeaderClass />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>LinearNavigation</h5>
    //         <LinearNavigation />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>MessageSlot</h5>
    //         <MessageSlot />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>NonLinearNavigation</h5>
    //         <NonLinearNavigation />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>Prefix</h5>
    //         <Prefix />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>StepError</h5>
    //         <StepError />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>TypeHorizontal</h5>
    //         <TypeHorizontal />
    //       </div>
    //       <div class='block-'>
    //         <h5 class='title'>TypeVertical</h5>
    //         <TypeVertical />
    //       </div>
    //     </div>
    //   );
    // };
  },
});
